<template>
  <!-- 导入结果 -->
  <a-modal v-bind="$attrs" v-on="$listeners" :visible.sync="dialogVisible" title="导入结果" :width="width" @cancel="dialogVisible = false">
    <span class="mr20" style="color: #52c41a"
      >同步完成，成功{{ exportList[0].successCount }}条，<span class="del_btn"
        >失败{{ exportList[0].datas.length }}条</span
      ></span
    >
    <ExportExcel
      ref="exportExcel"
      class="mb12"
      buttonType="link"
      :export-list="[{ columns: exportList[0].columns, datas: formatData }]"
      file-name="导入失败数据列表.xlsx"
      button-text="下载失败数据"
    />
    <a-table
      ref="table"
      tableLayout="fixed"
      size="default"
      :scroll="{ y: 350 }"
      rowKey="id"
      :columns="exportList[0].columns"
      :data-source="exportList[0].datas"
      :pagination="false"
    ></a-table>
    <!-- 导入按钮 -->
    <a-button slot="footer" type="primary" @click="dialogVisible = false">关闭</a-button>
  </a-modal>
</template>

<script>
import ExportExcel from '@/components/exportExcel/ExportExcel' // 导出

export default {
  name: 'ExportResult',
  components: {
    ExportExcel
  },
  props: {
    // 弹窗宽度
    width: {
      type: [Number, String],
      default() {
        return '70%'
      }
    },
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 导出配置：[{columns,datas}]
    exportList: {
      type: Array,
      default() {
        return [
          {
            columns: [],
            datas: [],
            successCount: 0
          }
        ]
      }
    }
  },
  computed: {
    // 弹窗控件
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    },
    // 格式化数据
    formatData() {
      let datas = this.$clone(this.exportList[0].datas)
      let columns = this.exportList[0].columns
      columns.forEach((item) => {
        if (item.customRender) {
          datas.forEach((i,index) => {
            console.log(i[item.dataIndex])
            i[item.dataIndex] = item.customRender(i[item.dataIndex], i,index)
          })
        }
      })
      return datas
    }
  }
}
</script>

<style>
</style>
